<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#myCan {
				display: block;
				margin: 0 auto;
				background-color: skyblue;
				background-color: #00ff00;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="400" height="400"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			
			//创建线性渐变背景
			// var bg = ctx.createLinearGradient(100,100,300,400);
			// 创建径向渐变
			var bg = ctx.createRadialGradient(200,200,50,200,200,200);
			bg.addColorStop(0,'red');
			bg.addColorStop(0.2,'green');
			bg.addColorStop(0.3,'orange');
			bg.addColorStop(0.4,'yellow');
			bg.addColorStop(0.5,'skyblue');
			bg.addColorStop(0.6,'#00ff00');
			bg.addColorStop(0.7,'#00ff7f');
			bg.addColorStop(0.8,'#aaff7f');
			bg.addColorStop(0.9,'skyblue');
			bg.addColorStop(1,'#ffaaff');
			ctx.fillStyle = bg;
			ctx.fillRect(0,0,400,400);


			/* var oImg = new Image();
			oImg.src = './images/3.png';
			oImg.onload=function(){
				// 创建平铺背景
				var bg = ctx.createPattern(oImg,'repeat');
				ctx.fillStyle = bg;
				ctx.fillRect(0,0,300,300);
			} */
		</script>
	</body>
</html>